<template>
  <base-view params-layout :form-item-span="formItemSpan" :model="query" class="custom" @submit="search">
    <template v-slot:params>
      <a-col :span="formItemSpan">
        <a-form-model-item label="商户号" labelAlign="right">
          <a-input placeholder="请输入商户号" v-model="query.mchntNo" />
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="商户名称" labelAlign="right">
          <a-input placeholder="请输入商户名称" v-model="query.mchntName" />
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="收单机构" labelAlign="right">
          <a-input placeholder="请输入收单机构" v-model="query.signInstId" />
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="巡检机构" labelAlign="right">
          <a-input placeholder="请输入巡检机构" v-model="query.inspectInstId" />
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="商户类型" labelAlign="right">
          <a-select v-model="query.mchntType">
            <a-select-option value="">-请选择商户类型-</a-select-option>
            <a-select-option value="00">普通商户</a-select-option>
            <a-select-option value="10">连锁商户</a-select-option>
            <a-select-option value="11">连锁商户门店</a-select-option>
            <a-select-option value="20">小微商户</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="巡检方式">
          <a-select v-model="query.inspectType">
            <a-select-option value="">-请选择巡检方式-</a-select-option>
            <a-select-option value="00">电话巡检</a-select-option>
            <a-select-option value="10">商户自助巡检</a-select-option>
            <a-select-option value="20">线下现场巡检</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="巡检状态">
          <a-select v-model="query.inspectStatus">
            <a-select-option value="">-请选择巡检状态-</a-select-option>
            <a-select-option value="00">未巡检</a-select-option>
            <a-select-option value="01">巡检待提交</a-select-option>
            <a-select-option value="02">巡检待审核</a-select-option>
            <a-select-option value="03">巡检拒绝</a-select-option>
            <a-select-option value="10">已巡检</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="巡检开始时间">
          <a-date-picker v-model="query.inspectBeginTime" />
        </a-form-model-item>
      </a-col>
      <a-col :span="formItemSpan">
        <a-form-model-item label="巡检结束时间">
          <a-date-picker v-model="query.inspectEndTime" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
      <a-form-model-item class="search">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-form-model-item>
      </a-col>
    </template>
    <template>
      <div class="section">
        <a-table
          ref="table" :columns="columns" @change="pageChange" @showSizeChange="pageChange" :dataSource="dataSource" :rowKey="(record, index) => {return index;}" :loading="loading" :pagination="pagination" :scroll="{ x: 1600 }"></a-table>
      </div>
    </template>
  </base-view>
</template>

<script>
export default {
  name: 'InspectTaskQuery',
  data: function () {
    return {
      formItemSpan: 8,
      beanInfo: {},
      modalVisible: false,
      operationType: 'view',
      query: {
        inspectStatus:"",
        inspectType:"",
        mchntType:"",
        inspectBeginTime:"",
        inspectEndTime:"",
      },
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      columns: [
        {
          title: '巡检任务名称',
          dataIndex: 'inspectTaskDesc',
          width:120
        },
        {
          title: '商户号',
          dataIndex: 'mchntNo',
          width:120
        },
        {
          title: '商户名称',
          dataIndex: 'mchntName',
          width:120
        },
        {
          title: '商户类型',
          dataIndex: 'mchntType',
          width:120,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "普通商户";
              case "10":
                return "连锁商户";
              case "11":
                return "连锁商户门店";
              case "20":
                return "小微商户";
            }
          }
        },
        {
          title: '收单机构',
          dataIndex: 'signInstName',
          width:120
        },
        {
          title: '巡检机构',
          dataIndex: 'inspectInstName',
          width:120
        },
        {
          title: '巡检方式',
          dataIndex: 'inspectType',
          width:120,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "电话巡检";
              case "10":
                return "商户自助巡检";
              case "20":
                return "线下现场巡检";
            }
          }
        },
        {
          title: '拓展经理',
          dataIndex: 'managerName',
          width:120
        },
        {
          title: '商户等级',
          dataIndex: 'mchntLevelName',
          width:120
        },
        {
          title: '巡检状态',
          dataIndex: 'inspectStatus',
          width:120,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "未巡检";
              case "01":
                return "巡检待提交";
              case "02":
                return "巡检待审核";
              case "03":
                return "巡检拒绝";
              case "10":
                return "已巡检";
            }
          }
        },
        {
          title: '巡检时间',
          dataIndex: 'inspectTime',
          width:120
        },
        {
          title: '巡检审核时间',
          dataIndex: 'inspectAuditTime',
          width:120
        },
        {
          title: '法人行名称',
          dataIndex: 'instName',
          width:120
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width:120
        }
      ],
      dataSource: []
    }
  },
  methods: {
    async submit() {
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },

    async reset(){
      this.query = {instId:this.query.instId,
          inspectStatus:"",
          inspectType:"",
          mchntType:"",
          inspectBeginTime:"",
          inspectEndTime:"",
      },
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search (e) {
      e && e.preventDefault && e.preventDefault()
      try {
        const res = await this.$get('/admin/merParam/inspectTaskDetailQuery/list', Object.assign(this.query, {
          mchntNo: this.query.mchntNo,
          mchntName: this.query.mchntName,
          signInstId: this.query.signInstId,
          inspectInstId: this.query.inspectInstId,
          mchntType: this.query.mchntType,
          inspectType: this.query.inspectType,
          inspectStatus: this.query.inspectStatus,
          inspectBeginTime: this.query.inspectBeginTime,
          inspectEndTime: this.query.inspectEndTime,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        }))
        this.dataSource = res.data.rows;
        this.$set(this.pagination, 'total', +res.data.total)
      } catch (e) {
        console.error(e)
      }
    },
    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
    },
  },

}
</script>

<style scoped>
.section {
  background: #fff;
}

.form {
  text-align: center;
}

.btn-group {
  margin-bottom: 20px;
}
</style>
